<!DOCTYPE html>
<html lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>配送区域划分11</title>
	<base href="http://localhost:8080/xiaoshidi/">

    <script type="text/javascript" src="https://www.njshenb.cn/vendor/laravel-admin/AdminLTE/plugins/jQuery/jQuery-2.1.4.min.js"></script>

	<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=nkXoaVpNKlqm6HhdxZiAnY5Rlhdjckgw"></script>
	<!--加载鼠标绘制工具-->
	<script type="text/javascript" src="https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
	<link rel="stylesheet" href="https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
	<!--加载检索信息窗口-->
	<script type="text/javascript" src="https://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
	<link rel="stylesheet" href="https://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />

<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
#r-result{height:100%;width:20%;float:left;}
</style>

</head>
<body>
<div>
<table bgcolor="#E3E4D8">
	<tr>
		<td>请输入地址：</td>
		<td>
			<input type="text" id="suggestId" size="20" placeholder="这里输入搜索地址" style="width:150px;" /></div><div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto;">
		</td>
		<td><input type="button" value="搜索" οnclick="theLocation();"/></td>
		<td><input type="button" value="确认" οnclick="getAllPoints();"/></td>
		<td><input type="button" value="清除" οnclick="clearAll();"/></td>
		<td><input type="button" value="开启编辑功能" οnclick="currentPolygon.enableEditing();"/></td>
		<td><input type="button" value="关闭编辑功能" οnclick="currentPolygon.disableEditing();"/></td>
	</tr>
</table>
</div>
<div id="allmap"></div>
</body>

</html>

<script type="text/javascript">

	//百度地图API功能
	function G(id) {
	    return document.getElementById(id);
	}
	var drawingManager,overlays = [],pointArray = [];
	//完成后回调
	var overlaycomplete = function(e){
	    map.removeOverlay(pointArray[0]);       //清除上一次标记
	    pointArray = [];
	    overlays.push(e.overlay);   //将用户点击的坐标保存进数组，方便清除
	    e.overlay.enableEditing();
	    getPoint(e.overlay.ro);
	    pointArray.push(e.overlay);
	};
	var styleOptions = {
        strokeColor:"red",    //边线颜色。
        fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。
        strokeWeight: 3,       //边线的宽度，以像素为单位。
        strokeOpacity: 0.8,	   //边线透明度，取值范围0 - 1。
        fillOpacity: 0,      //填充的透明度，取值范围0 - 1。
        strokeStyle: 'solid', //边线的样式，solid或dashed。
        fillColor: "none"
    }

	var map = new BMap.Map("allmap");
    map.centerAndZoom("合肥", 15);
    var ac = new BMap.Autocomplete({
    	"input" : "suggestId",
    	"location" : map
    });

    var areapoints = [{"id":"54c1733006084908a03f9ee8f251a013","remark":"绿地中心商业区","name":"绿地中心","operdate":1484725267000,"areapoints":"31.82941_117.266574,31.827968_117.276312,31.826556_117.284432,31.820236_117.283354,31.813394_117.282815,31.813823_117.275593,31.814836_117.267149,31.815296_117.254752,31.823182_117.261795,31.823182_117.261795"},{"id":"c7f54b279c3f4513b583e026e61116e0","remark":"天鹅湖万达广场","name":"万达广场","operdate":1484792986000,"areapoints":"31.839064_117.219116,31.83253_117.219403,31.828511_117.218146,31.826763_117.219259,31.826118_117.220517,31.822713_117.23586,31.822958_117.238375,31.838512_117.23798,31.839617_117.226194,31.839586_117.222925"},{"id":"70523ac957ea4e38a49612605a9b7f07","remark":"合肥市邮政管理局","name":"合肥市邮政管理局","operdate":1484892441000,"areapoints":"31.84709_117.237845,31.842074_117.238043,31.838623_117.238169,31.838409_117.240846,31.838079_117.244116,31.83712_117.252596,31.83689_117.254455,31.836591_117.25795,31.840081_117.257833,31.847703_117.257653,31.847688_117.254886,31.84758_117.25229,31.847289_117.243738"},{"id":"661e89d0defc41fc87f5c5a9cf808ed2","remark":"华润五彩城","name":"华润五彩城","operdate":1484894056000,"areapoints":"31.838497_117.238232,31.83457_117.238411,31.830828_117.238519,31.825367_117.238663,31.824047_117.238699,31.822882_117.238735,31.823219_117.24452,31.823403_117.250592,31.823403_117.254473,31.823311_117.258426,31.82328_117.261264,31.833466_117.269349,31.835399_117.270427,31.836196_117.264283,31.83635_117.262737,31.836319_117.258138"}];
    var secRing = [];
    var pointArray = [];
    var currentPolygon;
    if(areapoints != null){
    	$.each(areapoints, function(i, partition){
    		var str = partition.areapoints.split(",");
        	$.each(str, function(j, item){
        		var poi = item.split("_");
        		secRing.push(new BMap.Point(poi[1],poi[0]));
        	});
        	if(partition.id == ""){

        		//创建多边形
        		currentPolygon = new BMap.Polygon(secRing, {strokeColor:"red", strokeWeight:3, strokeOpacity:0.5, fillOpacity:0.4});
        		//添加多边形到地图上
                map.addOverlay(currentPolygon);
                /* currentPolygon.addEventListener('mouseover',function(){map.addOverlay(label)})
              	currentPolygon.addEventListener('mouseout',function(){map.removeOverlay(label)}) */
              	pointArray = pointArray.concat(currentPolygon.getPath());
                /* var label = new BMap.Label(partition.name,{position:map.getCenter()});
                map.addOverlay(label); */
                overlays.push(currentPolygon);
        	}else{

        		//创建多边形
                var secRingPolygon = new BMap.Polygon(secRing, {strokeColor:"red", strokeWeight:3, strokeOpacity:0.5, fillOpacity:0.4});
                //添加多边形到地图上
                map.addOverlay(secRingPolygon);
               	/* secRingPolygon.addEventListener('mouseover',function(){map.addOverlay(label)})
              	secRingPolygon.addEventListener('mouseout',function(){map.removeOverlay(label)}) */
              	pointArray = pointArray.concat(secRingPolygon.getPath());
                /* var label= new BMap.Label(partition.name,{position:map.getCenter()});
                map.addOverlay(label); */
        	}
        	map.setViewport(pointArray);    //调整视野
            secRing.length = 0;
    	});
    }
    map.enableScrollWheelZoom();
    drawingManager = new BMapLib.DrawingManager(map, {
         isOpen: false, //是否开启绘制模式
     	 enableDrawingTool: true, //是否显示工具栏
     	 drawingToolOptions: {
         anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
         offset: new BMap.Size(5, 5), //偏离值
         scale: 0.8, //工具栏缩放比例
         //工具栏显示数据
         drawingModes:[
             BMAP_DRAWING_MARKER,
             BMAP_DRAWING_POLYGON
         ]
     	 },
     	 polylineOptions: styleOptions, //线的样式
     	 polygonOptions: styleOptions, //多边形的样式
     	 rectangleOptions: styleOptions //矩形的样式
    });
    drawingManager.addEventListener('overlaycomplete', overlaycomplete);

    function getBoundary(currentSecRing){
    	alert(currentSecRing.length);
          var pointArray = [];
          for (var i = 0; i < currentSecRing.length; i++) {
              var ply = new BMap.Polygon(currentSecRing[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
              map.addOverlay(ply);  //添加覆盖物
              ply.addEventListener('mouseover',function(){map.addOverlay(label)})
              ply.addEventListener('mouseout',function(){map.removeOverlay(label)})
              pointArray = pointArray.concat(ply.getPath());
          }
          map.setViewport(pointArray);    //调整视野
          var label=new BMap.Label('文字内容',{position:map.getCenter()});
    }

	//获取用户点击的坐标，并保存到字符串中
	function getPoint(el){
	    var locations = '';
	    $.each(el, function(i,e) {
	        if(el.length == i){
	            return;
	        }
	        if(i>0){
	            locations +=',';
	        }
	        locations +=e.lat+"_"+e.lng;
	     });
	    opener.document.getElementById("areapoints").value=locations;
	    this.jsons = locations;
	}

	// 清除标记
	function clearAll() {
	    for(var i = 0; i < overlays.length; i++){
	        map.removeOverlay(overlays[i]);
	    }
	    overlays.length = 0;
	}

	// 用经纬度设置地图中心点
	function theLocation(){
		// 百度地图API功能
		var myPlace = document.getElementById("suggestId").value;
		//map.clearOverlays();    //清除地图上所有覆盖物
		function myFun(){
			var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
			map.centerAndZoom(pp, 15);
			map.addOverlay(new BMap.Marker(pp));    //添加标注
		}
		var local = new BMap.LocalSearch(map, { //智能搜索
		  onSearchComplete: myFun
		});
		local.search(myPlace);
	}

	function getAllPoints(){
		$.each(overlays, function(i, item){
			alert(item.ro.length);
			getPoint(item.ro)
		});
	}

</script>
